<template>
  <div class='contanier'>
  <el-row>
  <el-col :span="15">
    <div class="grid-content bg-purple bg-left">
      <div class='passenger-indent'>
        <p class='passenger-title'>乘机人</p>
        <!-- 输入表单 -->
        <el-form ref="userform" class='form' label-position='top' :model='{users}'>
         <div class='info-item'  v-for="(item,index) in users" :key="index">
            <!-- 乘机人姓名输入框 -->
          <el-form-item label='乘机人' 
          :prop='`users[${index}].username`' 
          :rules="[
          {
            required:true,
            message:'请输入乘机人姓名',
            trigger:'blur'
          }
          ]"
          >
            <el-input v-model="item.username" placeholder="乘机人姓名"></el-input>
          </el-form-item>
          <!-- 乘机人身份证输入框 -->
           <el-form-item label='证件类型'>
            <el-input placeholder="证件号码" v-model="item.id" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="身份证">
              <el-option label="身份证" value="1"></el-option>
            </el-select>
          </el-input>
          </el-form-item>
          <span class="el-icon-delete delete" @click="DeletePassengers(index)"></span>
         </div>
        </el-form>
        <el-button class='btn' @click="AddPassengers" type="primary">添加乘机人</el-button>
      </div>
      <div class='insurance'>
        <p>保险</p>
        <div class='options'>
    <el-checkbox-group v-model="insurances">
      <el-checkbox 
      @change="selectOption(item.id)" 
      border 
      name='type'
      :label="item.id" 
      v-for="(item,index) in data.insurances" 
      :key="index"
      >{{`${item.type}:$ ${item.price}/份*1 最高赔付${item.compensation}元`}}</el-checkbox>
      <!-- <el-checkbox label="2" border>航空延误险：￥30/份×1  最高赔付300元</el-checkbox> -->
    </el-checkbox-group>
        </div>
      </div>
      <div class='linkman'>
        <p>联系人</p>
       <div class='form'>
    <el-form ref="linkform" label-position="left" label-width="80px" :model="linkform" :rules='contachRulus'>
      <el-form-item label="姓名" prop='contactName'>
        <el-input v-model="linkform.contactName" @focus="clearError"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop='contactPhone'>
        <el-input v-model="linkform.contactPhone" @focus="clearError" placeholder='请输入手机号'><el-button slot="append" @click="SendCode" icon="el-icon-search">发送验证码</el-button></el-input>
      </el-form-item>
      <el-form-item label="验证码" @focus="clearError" prop='captcha'>
        <el-input v-model="linkform.captcha"></el-input>
      </el-form-item>
    </el-form>
    <div class='send'>
        <el-button size='medium' type="warning" @click="submitOrder">提交订单</el-button>
    </div>
       </div> 
      </div>
    <div class='loginForm' v-if="formShow">
    <el-tabs class="tabs" type="border-card">
      <!-- 登录表单 -->
  <el-tab-pane label="登录">
    <el-form ref="loginform" :model="loginform" :rules="rules">
  <el-form-item prop="username">
    <el-input v-model="loginform.username" @focus="handleclearMsg('username')" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop='password'>
    <el-input v-model="loginform.password" @focus="handleclearMsg('password')" type='password' placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleLogin">登录</el-button>
  </el-form-item>
</el-form>
  </el-tab-pane>
  <!-- 注册表单 -->
  <el-tab-pane label="注册">
     <el-form ref="registerform" :model="registerform" >
  <el-form-item>
    <el-input v-model="registerform.username" placeholder="请输入手机号或邮箱"></el-input>
  </el-form-item>
  <el-form-item class='auth'>
<el-input class='input' v-model="registerform.captcha" placeholder="请输入验证码"></el-input>
      <el-button class='button' type="info" plain @click="sendTel">发送验证码</el-button>
  </el-form-item>
  <el-form-item>
    <el-input v-model="registerform.nickname" placeholder="请输入昵称"></el-input>
  </el-form-item>
   <el-form-item>
    <el-input v-model="registerform.password" type='password' placeholder="请输入密码"></el-input>
  </el-form-item>
   <el-form-item>
    <el-input v-model="Confirm" type='password' placeholder="确认密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleRegister">注册</el-button>
  </el-form-item>
</el-form>
  </el-tab-pane>
</el-tabs>
    </div>
    </div>
  </el-col>
  <el-col :span="9">
    <div class="grid-content bg-purple-light">
      <div class='air-fare'>
        <div class='air-title'>
          <span>2019-07-02</span>
          <span>{{data.org_city_name}}-{{data.dst_city_name}}</span>
        </div>
        <div class='air-details'>
          <div class='depart-time'>
            <span class='top'>{{data.dep_time}}</span>
            <span>{{data.org_airport_name}}{{data.org_airport_quay}}</span>
          </div>
          <div class='air-time'>
            <span class='center'>---{{totalTime}}---</span>
            <span>{{data.airline_name}}{{data.flight_no}}</span>
          </div>
          <div class='dest-time'>
            <span class='top'>{{data.arr_time}}</span>
            <span>{{data.dst_airport_name}}</span>
          </div>
        </div>
        <div class='ticket'>
          <span>订单总价</span>
          <span>金额</span>
          <span>数量</span>
        </div>
        <div class='ticket'>
          <span>成人机票</span>
          <span>$860</span>
          <span>*1</span>
        </div>
        <div class='ticket'>
          <span>机建+燃油</span>
          <span>${{data.airport_tax_audlet}}/人/单程</span>
          <span>*1</span>
        </div>
        <div class='tickets'>
          <span>应付金额:</span>
          <span>${{imputedPrice}}</span>
        </div>
      </div>
    </div>
  </el-col>
  </el-row>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  data() {
    return {
      select: '',
      Airdata: '',
      // 登录数据
      loginform: {
        username: '',
        password: ''
      },
      formShow: false,
      // 注册数据
      registerform: {
        username: '',
        password: '',
        nickname: '',
        captcha: ''
      },
      Confirm: '',
      // 表单验证属性是一个数组 里面可以有多个验证方法
      rules: {
        username: [
          {
            // 输入框里面没有数据就就触发
            required: true,
            // 认证失败提示信息
            message: '请输入号码',
            // 触发的条件
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      // 保险
      insurances: [],
      // 乘机人
      users: [
        {
          username: '',
          id: ''
        }
      ],
      // 联系人表单
      linkform: {
        contactName: '',
        contactPhone: '',
        // 验证码
        captcha: ''
      },
      // 校验规则
      contachRulus: {
        contactName: [
          {
            required: true,
            message: '请输入联系人姓名',
            trigger: 'blur'
          }
        ],
        contactPhone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }
        ],
        captcha: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // 总价计算
    imputedPrice() {
      let total = 0
      total += this.data.seat_infos.org_settle_price * this.users.length
      this.data.insurances.forEach(element => {
        if (this.insurances.indexOf(element.id) >= 0) {
          total += element.price * this.users.length
        }
      })
      total += this.data.airport_tax_audlet * this.users.length
      return total
    },
    totalTime() {
      // if (!this.data.dep_time) return ''
      const dartHour = Number(this.data.arr_time.split(':')[0])
      const darMinutes = Number(this.data.arr_time.split(':')[1])
      const desHour = Number(this.data.dep_time.split(':')[0])
      const desMinutes = Number(this.data.dep_time.split(':')[1])
      let timeval = dartHour * 60 + darMinutes - (desHour * 60 + desMinutes)
      if (timeval < 0) {
        timeval += 24 * 60
      }
      return Math.floor(timeval / 60) + '小时' + (timeval % 60) + '分钟'
    }
  },
  watch: {
    users() {
      console.log('数据发生了改变')
      // this.imputedPrice()
    },
    insurances() {
      console.log('数据发生改变')
    }
  },
  methods: {
    // 输入框聚焦 清理认证失败提示
    handleclearMsg(error) {
      // 输入框失去焦点时如果没有数据就提示用户 但在聚焦时要把提示信息隐藏起来 有助于用户一体验
      // 调用组件方法
      this.$refs.loginform.clearValidate(error)
    },
    // 登录操作
    handleLogin() {
      // 发起登录请求前的表单验证
      // 表单验证里面有个方法可以用来校验数据 validate()
      // 里面传入一个回调函数 函数里面有两个参数 成功的参数 失败的参数
      // 他也可以用promise的方式来处理回调
      this.$refs.loginform.validate((isValid, itemNotValid) => {
        // 表单验证通过就该发送请求
        if (isValid) {
          this.$axios({
            url: '/accounts/login',
            method: 'post',
            data: this.loginform
          }).then(res => {
            // console.log(res.data)
            // 登录页面不在需要使用本地来存储数据 用vuex 他可以被所有的组件全局使用
            this.$store.commit('user/setuserInfo', res.data)
            console.log(this.$store.state.user.userinfo)
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            setTimeout(() => {
              this.formShow = false
            }, 1000)
          })
        } else {
          console.log(itemNotValid)
        }
      })
    },
    // 用户注册
    handleRegister() {
      // 注册前判断
      if (this.registerform.password !== this.Confirm) {
        this.$message({
          message: '密码不一致',
          type: 'warning'
        })
        return
      }
      this.$axios({
        url: '/accounts/register',
        method: 'post',
        data: this.registerform
      }).then(res => {
        // console.log(res.data)
        this.$message({
          message: '注册成功',
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push({
            path: '/'
          })
        }, 1500)
      })
    },
    // 获取验证码
    sendTel() {
      // 如果没有手机号码就不能发送验证码
      if (this.registerform.username === '') {
        this.$message({
          message: '请输入手机号',
          type: 'success'
        })
        return
      }
      this.$axios({
        url: '/captchas',
        method: 'post',
        data: {
          tel: this.registerform.username
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.code) {
          this.$message({
            message: '验证码为' + res.data.code,
            type: 'success'
          })
        }
      })
    },
    // 计算机票价格
    // imputedPrice() {
    //   let total = 0
    //   total += this.data.seat_infos.org_settle_price * this.users.length
    //   return total
    // },
    // 输入框聚焦清除错误提示
    clearError(error) {
      this.$refs.linkform.clearValidate(error)
    },
    // 添加乘客
    AddPassengers() {
      // 点击添加按钮就添加一个输入表单
      this.users.push({
        username: '',
        id: ''
      })
    },
    // 删除乘机人
    DeletePassengers(index) {
      this.users.splice(index, 1)
    },
    selectOption(id) {},
    // 发送验证码
    SendCode() {
      if (!this.linkform.contactPhone) {
        this.$message({
          message: '请输入手机号码',
          type: 'info'
        })
        return
      }
      this.$axios({
        url: '/captchas',
        method: 'post',
        data: {
          tel: this.linkform.contactPhone
        }
      }).then(res => {
        // console.log(res.data)
        this.$message({
          message: '尊敬的用户,你本次的验证码为:' + '' + res.data.code,
          type: 'success'
        })
        // this.captcha = res.data.code
      })
    },
    // 提交订单
    async submitOrder() {
      // 提交订单钱判断用户有没有登录
      if (!this.$store.state.user.userinfo.token) {
        this.$message({
          message: '请先登录',
          type: 'success'
        })
        setTimeout(() => {
          this.formShow = true
        }, 2000)
        return
      }
      // 提交订单前认证表单
      const userform = await this.$refs.userform.validate()
      const linkform = await this.$refs.linkform.validate()
      if (userform && linkform) {
        const data = {
          users: this.users,
          insurances: this.insurances,
          contactName: this.linkform.contactName,
          contactPhone: this.linkform.contactPhone,
          invoice: true,
          seat_xid: this.$route.query.seat_xid,
          air: this.$route.query.id,
          captcha: this.linkform.captcha
        }
        this.$axios({
          url: '/airorders',
          method: 'post',
          data,
          headers: {
            Authorization: 'Bearer ' + this.$store.state.user.userinfo.token
          }
        }).then(res => {
          console.log(res.data)
          this.Airdata = res.data.data
          this.$message({
            message: '提交订单成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push({
              path: '/air/pay',
              query: {
                id: this.Airdata.id
              }
            })
          }, 1500)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  .passenger-indent {
    padding-right: 20px;
    border-bottom: 1px dashed #dcdfe6;
    .passenger-title {
      font-size: 24px;
    }
    .btn {
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .form {
      border-bottom: 1px dashed #dcdfe6;
      padding-bottom: 20px;
      .info-item {
        position: relative;
        &:first-child {
          .delete {
            display: none;
          }
        }
        .delete {
          position: absolute;
          top: 92px;
          right: -20px;
          cursor: pointer;
          color: skyblue;
        }
      }
    }
  }
  .insurance {
    padding: 20px 0;
    border-bottom: 1px dashed #99a9bf;
    p {
      font-size: 24px;
    }
    .options {
      padding: 10px 0;
      .is-bordered {
        width: 50%;
        margin-left: 0;
        margin: 5px 0;
        display: block;
      }
    }
  }
  .linkman {
    padding: 20px 0;
    border-bottom: 1px dashed #99a9bf;
    p {
      font-size: 24px;
    }
    .form {
      padding: 15px 0;
      .el-input {
        width: 50%;
        margin: 10px 0;
      }
    }
    .send {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .el-button {
        width: 50%;
        height: 45px;
      }
    }
  }
  .el-form-item {
    margin-bottom: 0;
    ::v-deep.el-form-item__error {
      top: 84%;
    }
  }
  ::v-deep.el-select .el-input {
    width: 130px;
  }
  ::v-deep.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  ::v-deep.el-form-item__label {
    padding: 0;
  }
}
.bg-purple-light {
  // background: #e5e9f2;
}
.air-fare {
  border: 1px solid #ebebeb;
  .air-title {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    justify-content: space-between;
    font-size: 14px;
  }
  .air-details {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px 15px;
    div {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .center {
        font-size: 14px;
      }
      span:nth-child(2) {
        font-size: 14px;
        color: #97667f;
      }
      .top {
        font-size: 22px;
      }
    }
  }
  .ticket {
    display: flex;
    padding: 10px;
    border-top: 1px dashed #ebebeb;
    justify-content: space-between;
    align-items: center;
    span {
      flex: 1;
      // text-align: center;
      font-size: 14px;
      color: #666666;
    }
    span:nth-child(3) {
      text-align: right;
    }
    span:nth-child(2) {
      text-align: center;
    }
  }
  .tickets {
    display: flex;
    padding: 18px 10px;
    justify-content: center;
    align-content: center;
    border-top: 1px dashed #ebebeb;
    span {
      flex: 1;
      line-height: 35px;
      color: #7f6697;
      font-size: 14px;
    }
    span:nth-child(2) {
      text-align: right;
      color: #ffa500;
      font-size: 26px;
    }
  }
}
.loginForm {
  width: 400px;
  z-index: 2;
  position: fixed;
  left: 0;
  right: 0;
  top: 15%;
  bottom: 0;
  margin: auto;
  .el-button--primary {
    width: 370px;
  }
  ::v-deep.el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: center;
    .el-tabs__item {
      flex: 1;
      text-align: center;
    }
  }
  .auth {
    display: flex;
    justify-content: space-around;

    .input {
      width: 250px;
    }
  }
}
.loginForm .el-form-item {
  margin-bottom: 22px;
  ::v-deep.el-form-item__error {
    top: 100%;
  }
}
</style>